<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <style>
            #canvas:hover{
                cursor: pointer;
            }
        </style>
        <script type="text/javascript">
            
            //Global Declaration
            var game_timer;
            var canvas;
            var ctx;
            var height;
            var width;
            var array_block;
            var block_area = 100;                        
            var arry_value = [];
            var startTime;            
            var theInterval;
            var imageObj;
            var imageObjSelected;
            var random_checker;
            var current_value;
            
            function game_init(){   
                
                canvas = document.getElementById("canvas");
                ctx = canvas.getContext("2d");
                height = canvas.height;
                width = canvas.width; 
                canvas.addEventListener("click", getPosition);  
                
                current_value = 0
                random_checker = [];
                imageObjSelected = new Image();
                imageObj = new Image();
                array_block = {
                    position:[],                    
                    block_no:24,
                    array_number:[]                    
                }
                build_blocks();               
            }
            var loading;
            var loading1;            
            function loadGameImage(){                                
                loading=setTimeout(function(){
                    game_init();
                    build_blocks()                    
                    screenSaver1();                    
                }, 500);                               
                loading1 = setInterval(function(){
                    game_init();
                    build_blocks()
                    screenSaver();                                    
                }, 1000);                
            }
            
            function game_start(){
                clearInterval(loading1);
                clearInterval(loading);
                startTime=new Date();
                game_init();         
                theInterval=setInterval(drawElapsedTime, 50);
                paint();                                                               
            }
            
            function getPosition(ev){
                var x = Math.floor((ev.clientX - canvas.offsetLeft)/block_area);
                var y = Math.floor((ev.clientY - canvas.offsetTop)/block_area);                
                repaintNumber(x, y);
            }
            
            function paint(){                                 
                ctx.fillStyle = "white";
                ctx.fillRect(0, 0, width, height); 
                paintNextNumber('1');
                //Blocks
                for(var i = 0; i < array_block.position.length; i++)
                {                                 
                    var c = array_block.position[i];
                    for(var x =parseInt( i / 5 ); x < 5; x++ ){
                        paint_number(c.x+i,c.y +x );     
                    }                       
                }                          
            }    
            
            function build_blocks(){                
                for(var i = array_block.block_no; i>0; i--){                    
                    array_block.position.push({x:0,y:0})
                }
            }  
            
            function screenPaint1(x,y){
                imageObj.src = "../images/selected/"+randomNumber(x,y)+"a.png";
                ctx.drawImage(imageObj, x*block_area+1.5,(y+1)*block_area, 97,97);                
            }
            function screenPaint(x,y){
                imageObj.src = "../images/unselected/"+randomNumber(x,y)+".png";
                ctx.drawImage(imageObj, x*block_area+1.5,(y+1)*block_area, 97,97);                
            }
            
            function paint_number(x,y){ 
                imageObj.src = "../images/unselected/"+randomNumber(x,y)+".png";
                ctx.drawImage(imageObj, x*block_area+1.5,(y+1)*block_area, 97,97);                      
            }
            
            function repaintNumber(x,y){ 
                var getSelected = getSelectedNumber(x,y);                               
                if(getSelected.result == "correct"){
                    imageObjSelected.src = "../images/selected/"+getSelected.value+"a.png";
                    ctx.drawImage(imageObjSelected, x*block_area+1.5,y*block_area, 97,97);                                   
                }else{
                    if(getSelected.selected == "selected"){
                        imageObjSelected.src = "../images/selected/"+getSelected.value+"a.png";
                        ctx.drawImage(imageObjSelected, x*block_area+1.5,y*block_area, 97,97);
                    }else{
                        imageObjSelected.src = "../images/unselected/"+getSelected.value+".png";
                        ctx.drawImage(imageObjSelected, x*block_area+1.5,y*block_area, 97,97);
                    }    
                }
            }                      
            function randomNumber(x,y){
                var random = Math.floor(Math.random() * (25)) + 1;                                      
                //Filtering duplicates
                if (random_checker.indexOf(random) == -1) {
                    random_checker.push(random);                    
                    array_block.array_number.push({n:random,x:x,y:y+1,selected:false});
                    
                    return random;
                } else {
                    return randomNumber(x,y);
                }                          
            }                
            
            function getSelectedNumber(x,y){                                
                var value = {
                    result:"correct",
                    value:0,
                    selected:""
                }; 
                for(var i=0; i<=array_block.array_number.length-1;i++){                    
                    if(array_block.array_number[i].x == x && array_block.array_number[i].y == y){                       
                        value.value = array_block.array_number[i].n;                          
                        if(value.value - 1 == current_value){                           
                            current_value = value.value;
                            value.result = "correct";
                            value.selected = "selected";
                            nextNumber(x,y);
                        }
                        else{
                            if(value.value == current_value || value.value < current_value){
                                value.selected = "";
                            }else{
                                value.result = "error" 
                            }                                                       
                        }                        
                        return value;                      
                    }                   
                }                 
            } 
            function drawElapsedTime(){                 
                ctx.clearRect(270,-10,100, 100);                
                ctx.fillStyle="#858585";
                ctx.fillRect(270, 20, 200, 70);                
                elapsedTime = (new Date().getTime()) - startTime;
                var ms = (elapsedTime) % 1000;
                elapsedTime = (elapsedTime - ms) / 1000;
                var secs = elapsedTime % 60;
                elapsedTime = (elapsedTime - secs) / 60;
                var mins = elapsedTime % 60;
                var hrs = (elapsedTime - mins) / 60;                   
                ctx.fillStyle="white";
                ctx.font="50px Trebuchet MS"                            
                ctx.fillText(mins+" : "+secs+" : "+ms,325,50,80);                                              
            }
            function paintNextNumber(n){
                ctx.clearRect(30, -10,100, 100);                                
                ctx.fillStyle="black";
                ctx.textBaseline = "middle"; 
                ctx.font="30px Trebuchet MS"
                ctx.fillText("Next # " + n,30,50,100);
            }
            var next = 0;
            function nextNumber(x,y){
                
                var getSelected = getSelectedNumber(x,y); 
                next = getSelected.value + 1;
                console.log(getSelected.value)
                if(getSelected.value == 25){
                    next = 25
                    clearInterval(theInterval);
                }                  
                paintNextNumber(next);
            }
            function screenSaver(){
                for(var i = 0; i <= array_block.position.length-1; i++)
                {                                 
                    var c = array_block.position[i];                    
                    for(var x = parseInt( i / 5 ); x < 5; x++ ){
                        screenPaint(c.x+i,c.y +x );     
                    }                    
                }                 
            }
            function screenSaver1(){
                for(var i = 0; i <= array_block.position.length-1; i++)
                {                                 
                    var c = array_block.position[i];                    
                    for(var x = parseInt( i / 5 ); x < 5; x++ ){
                        screenPaint1(c.x+i,c.y +x );     
                    }
                }                 
            }
        </script>
    </head>
    <body onload="loadGameImage()">
        <table>            
            <tr>
                <td>
                    <canvas id="canvas" width="500" height="600" style="border: 1px solid black;">

                    </canvas>
                </td>
                <td>

                    <button id="start" onclick="game_start()">Start</button>
                    <button id="stop" onclick="stop()" style="display: none;">Stop</button>
                </td>
            </tr>
        </table>
    </body>
</html>
